<template>

  <div>
    <h1>这是表格</h1>

    <div class="table-view">

      <!-- 带筛选框的 table -->
      <filter-table @on-search="onSearch"
                    :columns="tableColumns"
                    :data="users"
                    v-loading="loading"
      >
      </filter-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          v-if='users.length > 0'
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="users.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

    </div>



  </div>


</template>

<script>

    import FilterTable from '../../components/FilterTable'

    const userStatus = {
      0: {
        value: 0,
        name: '全部'
      },
      1: {
        value: 1,
        name: '已锁定',
        color: 'red'
      },
      2: {
        value: 2,
        name: '正常',
        color: 'green'
      },
    };

    export default {
      name: "number",
      components: {
        FilterTable
      },
      data() {
        return {
          msg: 'Welcome to Your Vue.js App',
          users: [],
          tableColumns: [
            {
              type: 'index',
              width: 60,
              align: 'center'
            },
            {
              title: '用户名',
              key: 'username',
              filter: {
                type: 'Input'
              }
            },
            {
              title: '手机号',
              key: 'phone',
              filter: {
                type: 'Input'
              }
            },
            {
              title: '邮箱',
              key: 'email',
              filter: {
                type: 'Input'
              }
            },
            {
              title: '账户余额 (元)',
              key: 'money',
              filter: {
                type: 'Input'
              },
            },
            {
              title: '状态',
              key: 'status',
              filter: {
                type: 'Select',
                option: userStatus
              },
              render: (h, params) => {
                return h('Tag', {
                  slot: 'context',
                  props: {
                    color: this.formatStatus(params.row.status, userStatus).color
                  }
                }, this.formatStatus(params.row.status, userStatus).name)
              }
            },
          ],


          tableData: [],
          loading: true,
          //需要给分页组件传的信息
          paginations: {
            total: 0,        // 总数
            pageIndex: 1,  // 当前位于哪页
            pageSize: 5,   // 1页显示多少条
            pageSizes: [5, 10, 15, 20],  //每页显示多少条
            layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
          },


          currentPage: 4


        }
      },
      created() {
        this.users = [
          {
            username: '小明',
            phone: '17760172601',
            email: '1023007219@qq.com',
            money: '50',
            status: '1',
          }, {
            username: '小兰',
            phone: '17760172605',
            email: '1023007219@qq.com',
            money: '50',
            status: '2',
          }, {
            username: '小东',
            phone: '17761232601',
            email: '1023007219@qq.com',
            money: '20',
            status: '2',
          }, {
            username: '咱三',
            phone: '17722226011',
            email: '1023007219@qq.com',
            money: '20',
            status: '1',
          }, {
            username: '小明',
            phone: '17760202601',
            email: '1023007219@qq.com',
            money: '20',
            status: '1',
          }, {
            username: '尼斯',
            phone: '17760172601',
            email: '1023007219@qq.com',
            money: '50',
            status: '1',
          }, {
            username: '导航',
            phone: '17760172601',
            email: '1023007219@qq.com',
            money: '20',
            status: '1',
          }, {
            username: '但是还是',
            phone: '17760172601',
            email: '1023007219@qq.com',
            money: '50',
            status: '1',
          },
        ];
      },
      mounted() {

        this.getUserList();
      },
      methods: {

        getUserList(){

          this.loading = true;

          setTimeout(() => {

            this.loading = false;
            // this.paginations.total = res.data.total;
            // this.tableData = res.data.userList;
          }, 1000);

        },


        /**
         * 格式化状态
         * @param value 状态值
         * @param status 状态对象
         * @returns {*} 返回状态
         */
        formatStatus(value, status) {
          return status[value] || {value: '', name: ''};
        },
        onSearch(search) {
          // 模拟数据库查询数据
          // 这个search应该是传到后台,然后台来根据条件查询数据库
          alert('查询条件：' + JSON.stringify(search, null, 4));
        },

        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        }




      },



    }
</script>

<style scoped>

  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }

</style>
